<template>
	<view>
		<view style="width: 100%;height: 100vh;position: absolute;left: 0;tab-size: 0;" id="areaBox">
		</view>
		<view class="fixed-bottom mb-3 px-5">
			<view class="mb-2"><input @input="bindInput" class="uni-input" placeholder="输入围栏名称" /></view>
			<view class="flex justify-between">
				<view class="flex rounded-circle bg-dark colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 100rpx;" @click="clearPoints">
					清除
				</view>
				<view class="flex rounded-circle bg-danger colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 100rpx;" @click="startPoints">
					绘制
				</view>
				<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 100rpx;" @click="save">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import maps from "../../../static/maps.js"
	import gcoord from 'gcoord';
	export default {
		data() {
			return {
				map: null,
				icon: null,
				latitude: '',
				longitude: '',
				markers: [],
				array: [],
				polygon: [],
				value: '',
				saveStatus: false,
				pointslist: [],
				mappolygon: null
			};
		},
		onLoad() {

			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('areaBox', {
					zoom: 15, //缩放级别
					resizeEnable: true, //自动定位
				});
				// _this.getPosition();
				_this.getLocation();
				_this.icon = new AMap.Icon({
					size: new AMap.Size(30, 30),
					image: 'http://image.sxxat.cn/ic_default_head.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(30, 30),
				});
				_this.map.on('click', function(e) {
					_this.tapMap(e)
				})
			})

		},
		methods: {
			//获取定位信息
			getPosition() {
				const that = this;
				uni.showLoading({
					title: '系统正在定位'
				});
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {
						uni.hideLoading()
						console.log('当前位置的经度：' + lb.longitude);
						console.log('当前位置的纬度：' + lb.latitude);
						that.latitude = lb.latitude;
						that.longitude = lb.longitude;
						console.log(lb.longitude, lb.latitude);
						var result = gcoord.transform(
							[lb.longitude, lb.latitude], // 经纬度坐标
							gcoord.WGS84, // 当前坐标系
							gcoord.GCJ02 // 目标坐标系
						);
						that.map.setCenter(result);
						console.log(result); // [116.41661560068297, 39.92196580126834]
					},
				})
			},
			getLocation() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchZb.shtml'
				};
				let param = {
					user_id: uni.getStorageSync('classUserId'),
					userId: uni.getStorageSync('userInfo').userId,
					authToken: uni.getStorageSync('userInfo').token
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							if (res.data.latitude != '' || res.data.longitude != '') {
								let data = res.data.data;
								console.log(data);
								_this.latitude = data[0].latitude;
								_this.longitude = data[0].longitude;
								_this.map.setCenter([_this.longitude, _this.latitude]);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			bindInput(e) {
				this.value = e.detail.value;
			},
			tapMap(e) {
				var that = this;
				console.log(e);
				let marker = new AMap.Marker({
					map: that.map,
					position: [e.lnglat.lng, e.lnglat.lat], //位置
					icon: that.icon, // 添加 Icon 图标 URL
					offset: new AMap.Pixel(-15, -15), //偏移量
				});
				let jwd = {
					latitude: e.lnglat.lat,
					longitude: e.lnglat.lng,
					index: 0
				};
				that.markers.push(marker);
				that.array.push(jwd);
				let pointjwd = {
					lat: e.lnglat.lat,
					lng: e.lnglat.lng,
					index: 0
				};
				that.pointslist.push(pointjwd);
			},
			clearPoints() {
				this.map.remove(this.markers);
				this.map.remove(this.mappolygon);
				this.mappolygon = null;
				this.markers = [];
				this.array = [];
				this.polygon = [];
				this.pointslist = [];
				this.saveStatus = false;
			},
			startPoints() {
				let _this = this;
				if (_this.pointslist.length > 3) {
					_this.polygon = [];
					// let param = {
					// 	points: ,
					// 	strokeWidth: 1,
					// 	strokeColor: '#333333',
					// 	fillColor: '#D4F2E7'
					// };
					_this.array.forEach((item) => {
						_this.polygon.push([item.longitude, item.latitude]);
					});
					_this.mappolygon = new AMap.Polygon({
						path: _this.polygon, //设置多边形边界路径
						strokeColor: "#FF33FF", //线颜色
						strokeOpacity: 0.2, //线透明度
						strokeWeight: 1, //线宽
						fillColor: "#1791fc", //填充色
						fillOpacity: 0.35 //填充透明度
					});
					_this.mappolygon.setMap(_this.map);
					_this.saveStatus = true;
				}
			},
			save() {
				let _this = this;
				if (_this.value != '') {
					if (_this.saveStatus) {
						uni.showLoading({
							title: '添加围栏'
						});
						uni.request({
							url: _this.$http.baseUrl + 'Kcp/SaveWl.shtml',
							data: {
								addType: 2,
								address: '',
								serialNo: uni.getStorageSync('imei'),
								fenceName: _this.value,
								fencePoints: _this.pointslist
							},
							method: 'POST',
							header: {
								'X-Requested-With': 'XMLHttpRequest',
								Accept: 'application/json',
								'Content-Type': 'application/json; charset=UTF-8'
							},
							dataType: 'json',
							success: res => {
								uni.hideLoading();
								if (res.data.ReturnData.stateCode == 1) {
									uni.showToast({
										icon: 'none',
										title: res.data.ReturnData.message
									});
									_this.clearPoints();
									
									uni.navigateBack({
										delta:1	
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.ReturnData.message
									});
									_this.clearPoints();
								}
							},
							fail: res => {
								console.log(res);
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请先绘制围栏'
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入围栏名称'
					});
				}
			}
		}
	};
</script>

<style></style>
